<template>
  <div class="metaTreeList" :style="maxWidth && maxWidth != 0 ? 'max-width: ' + maxWidth + 'px' : ''">
    <div
      class="metaTreeList_title"
      :style="titleSize && titleSize !== '' ? 'font-size:' + titleSize + 'px' : ''"
    >
      <img v-if="icon && icon !== ''" :src="icon" class="metaTreeList_icon" />
      <div class="metaTreeList_titleText">{{ title }}</div>
      <el-button
        v-if="otherBtn !== ''"
        size="mini"
        class="metaTreeList_titleBtn"
        @click="otherBtnClick"
        >{{ otherBtn }}</el-button
      >
    </div>
    <div class="metaTreeList_tree">
      <el-tree
        ref="metaSimTree"
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        highlight-current
        :expand-on-click-node="false"
        :node-key="defaultProps.key"
        :render-after-expand="false"
        default-expand-all
      ></el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "MetaTreeList",
  mixins: [],
  props: {
    maxWidth: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: "",
    },
    titleSize: {
      type: String,
      default: "",
    },
    otherBtn: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: ""
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "label",
          key: "id",
        };
      },
    },
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    handleNodeClick(item) {
      this.$emit("treeItemChoose", item);
    },
    otherBtnClick() {
      this.$emit("otherBtnClick");
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less">
@media screen and (min-width: 415px) {
  .metaTreeList {
    box-sizing: border-box;
    min-width: 184px;
    margin: 0 15px;
    padding: 15px 0;
    border-radius: 6px;
    float: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .metaTreeList_title {
      width: 100%;
      margin-bottom: 10px;
      font-size: 22px;
      .metaTreeList_icon {
        width: 16px;
        margin-top: 5px;
        margin-right: 10px;
        float: left;
      }
      .metaTreeList_titleText {
        float: left;
        line-height: 26px;
      }
      .metaTreeList_titleBtn {
        margin-left: 6px;
        padding: 7px 10px;
        float: right;
      }
    }
    .metaTreeList_tree {
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
    .metaTreeList_tree .el-tree-node__label {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .metaTreeList_tree::-webkit-scrollbar {
      display: none;
    }
  }
}
@media screen and (max-width: 414px) {
  .metaTreeList {
    box-sizing: border-box;
    min-width: 120px;
    width: 120px;
    border-radius: 6px;
    float: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    .metaTreeList_title {
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-size: 14px;
      border-bottom: 1px solid rgb(228, 234, 236);
      .metaTreeList_titleBtn {
        margin-left: 6px;
        padding: 7px 10px;
        float: right;
      }
    }
    .metaTreeList_tree {
      width: 100%;
      height: 100%;
      overflow: scroll;
      font-size: 12px !important;
      .el-tree-node__label {
        font-size: 12px !important;
      }
    }
    .metaTreeList_tree::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
